import React, { useEffect, useState } from "react"
import { Outlet, useLocation, NavLink, useNavigate } from "react-router-dom"

import linkmap from '../../home/link.js'
import ItemCom from "../../../components/itemCom/index.jsx"

export default () => {

    // template

    let TEMPLATE;
    if (React) {
        TEMPLATE = () => (
            <>
                {
                    itemlist.map((v, i) => (
                        <ItemCom key={i} name={v.name}></ItemCom>
                    ))
                }
            </>
        )
    }

    // data

    const [load, setLoad] = useState(0)
    const [route, setRoute] = useState(useLocation())
    const [query, setQuery] = useState(() => {
        var temp = route.search && route.search.split('?')[1].split('&') || []
        var tempobj = {}
        for (var i = 0; i < temp.length; i++) {
            tempobj[temp[i].split('=')[0]] = temp[i].split('=')[1]
        }
        return tempobj
    })
    const [param, setParam] = useState(() => {
        var id = route.pathname && route.pathname.split('id_')[1]
        return id
    })
    const [itemlist, setItemlist] = useState([])

    // methods

    const setitems = () => {
        setTimeout(() => {
            setItemlist(() => {
                var temp = [...itemlist]
                for (var i = 0; i < linkmap.items.length; i++) {
                    if (linkmap.items[i].pid == param) {
                        temp.push(linkmap.items[i])
                    }
                }
                return temp
            })
        }, 100)
    }

    // mounted

    const mounted = () => {

        if (!load) {
            setLoad((props) => 1)
            //其他处理
            setitems()
        }

    }

    const destroyed = () => {

    }

    //钩子

    useEffect(() => {

        //mounted

        mounted()

        //destroyed

        return destroyed

    }, [])

    // updated

    useEffect(() => {
        setitems()
    }, [param])

    /* ### */

    return TEMPLATE()
}